<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>管理平台</title>
    <link rel="stylesheet" href="__PUBLIC__/build/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            height: 100%;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        /*头部*/
        #header{
            width: 100%;
            height: 60px;
            position: fixed;
            z-index: 1;
            background: #23262E;
        }
        .header_a{
            height: 100%;
        }
        .app-logo{
            background: url("__PUBLIC__/res/images/logo.png") no-repeat center center / 60%;
            width: 10%;
            height: 100%;
            display: inline-block;
            position: absolute;
            left: 0;
        }
        .top_nav, .top_nav_phone{
            background: #23262E;
            margin: 0 0 0 10%;
            height: 100%;
        }

        /*右上角个人消息处理*/
        .user-info{
            position: absolute;
            right: 0;
            top:0;
            z-index: 1;
            height: 100%;
        }
        .user-info .user_head{
            float: right;
            padding: 15px 20px 0 0;
            height: 100%;
        }
        .user-info .user_head i{
            font-size: 22px;
            color: #FFFFFF;
        }
        .user-info ul.user_op{
            clear: both;
            background: #ffffff;
            border: 1px solid #cccccc;
            margin: 60px 0 0 0;
        }
        .user_op li a{
            display: block;
            padding: 0 18px;
            line-height: 40px;
            border-bottom: 1px solid #cccccc;
        }
        /*右上角个人消息处理*/

        /*侧边栏*/
        #sidebar{
            position: absolute;
            overflow: hidden;
            top: 60px;
            width: 10%;
            height: 92%;
            z-index: 999;
        }
        .top_nav .layui-nav-item{
            height: 100%;
            /*line-height: 320%;*/
        }
        .layui-nav .layui-nav-item a{
            padding: 0 1.2rem;
        }
        .layui-nav-tree {
            /*width: calc(10vw + 50px);*/
            display: block;
            height: 100%;
            overflow-x: hidden;
        }
        .layui-nav-tree::-webkit-scrollbar {
            display: none;
        }

        .layui-nav-tree .layui-nav-more{
            left: 8%;
        }
        .layui-nav-tree .layui-nav-item a{
            text-indent: 10%;
        }
        .layui-body{
            top: 60px;
            left: 10.2%;
            z-index: 0;
            height: 92%;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        .layui-tab{
            margin: 3px 0 0 0;
            height: 97%;
        }
        .layui-tab-content{
            padding: 0.7%;
            height: 95%;
        }
        .layui-tab-content .layui-show{
            height: 99.79%;
        }
        .layui-tab-content .layui-tab-item iframe{
            width: 100%;
            height: 100%;
        }
        .layui-tab-title .layui-this::after{
            height: 40px;
        }

        /*刷新窗口*/
        .tab-control ul li{
            padding: 6px 2px;
            text-align: center;
        }
        .tab-control ul li:hover{
            background: #282B33;
            color: #ffffff;
        }

        /* 遮罩：用于隐藏侧边栏 */
        .mask{
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 888;
            background:rgba(0,0,0,0.2);
            display: none;
            top: 0;
        }

        /*响应式处理*/
        @media (min-width: 751px) and (max-width: 1980px){
            #header .top_nav_phone{
                display: none;
            }
            #sidebar{
                display: block;
            }
        }
        @media screen and (max-width: 750px) {
            #header .top_nav, #sidebar, .app-logo{
                display: none;
            }
            #sidebar, .layui-nav-tree{
                width: 150px;
            }
            #header .top_nav_phone{
                display: block;
                margin: 0;
            }
            .layui-body{
                left:0;
            }
        }
    </style>
</head>
<body>



<div id="header">
    <a class="app-logo" href="index.html"></a>

    <!-- 更多按钮 -->
    <ul class="layui-nav top_nav_phone">
        <li class="header_pc top_nav_more" style="width: 25px;display: inline-block;">
            <a href="javascript:;" >
                <img src="__PUBLIC__/res/images/more.png" alt="" height="20" width="20" style="margin-top: 10px;">
            </a>
        </li>

        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child" >
                <dd><a href="javascript:;">移动模块</a></dd>
                <dd><a href="javascript:;">后台模版</a></dd>
                <dd><a href="javascript:;">电商平台</a></dd>
            </dl>
        </li>
    </ul>
    <!-- 导航 -->
    <ul class="layui-nav top_nav" pc></ul>

    <div class="user-info" onmouseout="$('.user_op').hide();" onmouseover="$('.user_op').show();">
        <a class="user_head" href="javascript:;"><i class="layui-icon">&#xe612;</i></a>
        <ul class="user_op" style="display: none;">
            <li><a href="javascript:;">你好,{$adminInfo['nickname']}</a></li>
            <li><a class="menus" href="javascript:;" data-page="{:U('System/SysAdmin/modifySelfInfo')}">修改信息</a></li>
            <li><a href="{:U('System/Public/loginOut')}">退出登录</a></li>
        </ul>
    </div>
</div>


<div id="sidebar">
    <ul class="layui-nav layui-nav-tree" lay-filter="demo">
        <volist name="menuList" id="vo">
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;" data-page="{:U($vo['control'])}">{$vo.name}</a>
                <notempty name="vo['_child']">
                    <dl class="layui-nav-child">
                        <volist name="vo['_child']" id="vos">
                            <dd>
                                <a class="menus" href="javascript:;" data-page="{:U($vos['control'])}">{$vos.name}</a>
                            </dd>
                        </volist>
                    </dl>
                </notempty>
            </li>
        </volist>
    </ul>
</div>

<div class="layui-body">
    <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
        <ul class="layui-tab-title">
            <!--<li class="layui-this" lay-id="11">网站设置</li>-->
        </ul>
        <div class="layui-tab-content">
            <!--<div class="layui-tab-item layui-show">-->
                <!--<iframe frameborder="0" src="pages/system/role/index.html" id="LAY_demo"></iframe>-->
            <!--</div>-->
            <div class="mask"></div>
        </div>
    </div>
</div>


<!--刷新窗口-->
<div class="tab-control" style="display: none;">
    <ul>
        <li onclick="update_page();">刷新标签</li>
        <li onclick="close_page();">关闭标签</li>
        <li onclick="close_page('all')">关闭全部</li>
    </ul>
</div>

<footer>

</footer>

<script src="__PUBLIC__/res/js/jquery-2.2.2.min.js"></script>
<script src="__PUBLIC__/res/js/common.js"></script>
<script src="__PUBLIC__/build/layui.js"></script>
<script>
    layui.config({
        base: '__PUBLIC__/res/js/modules/' //你的模块目录
    }).use('index'); //加载入口
</script>

<script>
    $(document).ready(function () {

    });

    // 点击更多，显示左侧侧边栏
    $(".top_nav_more").on("click",function () {
        $(".mask").css({display:"block"});
        $("#sidebar").toggle();
    });

    // 点击空白，隐藏侧边栏
    $(".mask").on("click",function () {
        $("#sidebar").hide();
        $(".mask").css("display","none");
    })

    layui.use('element', function(){
        $(function () {
            ajaxPostRequest("{:U('Admin/Index/getNavList')}",'', function (data) {
                var top_nav = $('.top_nav').empty();
                if(data.error == 0){
                    $.each(data.rows, function (key,val) {
                        top_nav.append(
                            '<li class="layui-nav-item header_pc" pc style="height:100%;">'+
                                '<a href="javascript:;" class="header_a" data-id="'+val['pk_id']+'">'+val['name']+'</a>'+
                            '</li>'
                        );
                    });

                    $('.top_nav li.layui-nav-item a').click(function () {
                        showSonMenu($(this).attr('data-id'));
                    });

                    //默认显示第一个导航的菜单
                    $('.top_nav li.layui-nav-item a').eq(0).click();
                }
            });
        });
        

        /**
         * 显示子菜单
         * @param id
         */
        function showSonMenu(id){
            ajaxPostRequest("{:U('Admin/Index/getMenuList')}",{pk_id:id}, function (data) {
                var nav_tree = $('.layui-nav-tree').empty();
                if(data.error == 0){
                    var app_url = "{:C('APP_URL')}";
                    $.each(data.rows, function (key,val) {
                        var menuHtml = '<li class="layui-nav-item layui-nav-itemed">';
                        if(val['_child']){
                            menuHtml += '<a href="javascript:;" data-page="'+val['pk_id']+'">'+val['name']+'</a>';
                            menuHtml += '<dl class="layui-nav-child">';
                            $.each(val['_child'], function (k, v) {
                                menuHtml += '<dd><a class="menus" href="javascript:;" data-page="'+app_url+ '/' + v['control']+'">'+v['name']+'</a></dd>';
                            });
                            menuHtml += '</dl>';
                        }else{
                            menuHtml += '<a class="menus" href="javascript:;" data-page="'+app_url+ '/' + val['control']+'">'+val['name']+'</a>';
                        }
                        menuHtml += '</li>';
                        nav_tree.append(menuHtml);
                    });

                    //刷新菜单
                    element.init();

                    $('.layui-nav-item a.menus,a.menus').click(function () {
                        var othis = $(this),page_name = othis.text();
                        if($(".layui-tab-title li[lay-id='"+page_name+"']").length == 1){
                            element.tabChange('demo', page_name); //切换到指定选项卡
                        }else{
                            active['tabAdd'].call(this,othis);
                        }
                    });
                }
            });
        }

        //触发事件
        var element = layui.element();
        var active = {
            tabAdd: function(othis){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: $(othis).text() //用于演示
                    ,content: '<iframe frameborder="0" src="'+$(othis).attr('data-page')+'" ></iframe>'
                    ,id: $(othis).text() //实际使用一般是规定好的id，这里以时间戳模拟下
                });
                element.tabChange('demo', $(othis).text());
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”
                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };
    });


    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer;


        $(document).bind("contextmenu",function(e){
            return false;
        });
        $('.layui-tab-title').mousedown(function (e) {
            if(3 == e.which){
                console.log(e);
                layer.tabControlIndex = layer.open({
                    title: '操作',
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 1, //不显示关闭按钮
                    anim: 0,
                    isOutAnim: false,
                    shadeClose: true, //开启遮罩关闭
                    offset: [e.pageY, e.pageX],
                    content: $('.tab-control')
                });
            }
        });
    });

    function update_page(){
        layer.close(layer.tabControlIndex);
        $('.layui-show iframe').attr('src',$('.layui-show iframe').attr('src'));
    }

    function close_page(type){
        layer.close(layer.tabControlIndex);
        if(type == 'all'){
            $('.layui-tab-close').click();
        }else{
            $('.layui-this .layui-tab-close').click();
        }
    }


</script>

</body>
</html>